<template>
	<view :style="{'--color':color}">
		<status-bar :title='title?title:"已成功"' :back='1'></status-bar>
		
		<userInfo @userInfo="userInfo"></userInfo>
		
		
		<view class="viewbox auto">
			 <view class="list" v-for="(item,index) in pageData" :key="index">
				 <view class="userItem" v-for="(subItem,subIndex) in item.blockInfo">
					 <view class="userBox">
						<image :src="$pop.staticImg(`ntn01.png`)" mode="aspectFill" 
							   class="ntnBg_img_one" v-if="subItem.num == 0"></image>
						 <image :src="$pop.staticImg(`ntn02.png`)" mode="aspectFill"
							   class="ntnBg_img" v-if="subItem.num == 1"></image>
						 <image :src="$pop.staticImg(`ntn03.png`)" mode="aspectFill" 
							   class="ntnBg_img" v-if="subItem.num == 2"></image>
						 <image :src="$imgUrls(subItem.v_headimg)" mode="aspectFill" class="userImgs"
							v-if="subItem.v_headimg"></image>
					 </view>
						<text class="color_33 size30 m-top10">{{subItem.v_name}}</text>
						<text class="color_33 size26 m-top10">{{subItem.v_tel}}</text>
				 </view>
			 </view>
		</view>
		
	
	   <emptys v-if="!pageData.length"></emptys>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import userInfo from './components/userInfo.vue'
	export default {
		components:{
			userInfo
		},
		data() {
			return {
				title:'',
				user_Info:'',
				current:0,
				show:false,
				pageData:[],
			}
		},
		onLoad() {
			this.getSaleProgress();
		},
		methods: {
			getSaleProgress() {
				this.$http.get({
					url: '/BlockApi/getSaleProgress',
					data: {
						retire: 1
					}
				}).then(res => {
					if(res.code != 200) return this.$Toast(res.msg);
					const result = res.data || [];
					this.pageData = result;
					
				})
			},
			userInfo(e){
				this.user_Info = e;
			},
			showItem(index){
				this.current = index;
				this.show = true;
			}
		},
		
		computed:{
			...mapState(['color'])
		}
	}
</script>
<style lang="scss">
	// page {
	// 	background-color: #F5F5F5;
	// }
</style>
<style lang="scss" scoped>
	.list{
		width:100%;
		height: 260rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-bottom: 1rpx solid #f5f5f5;
	}
	.userItem{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.userImgs {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
	}
	.userBox{
		width:120rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.ntnBg_img{
		width:100%;
		height: 100%;
		position: absolute;
		left:0;
		top:0;
		z-index:10;
	}
	.ntnBg_img_one{
		width:84%;
		height: 84%;
		position: absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:10;
	}
</style>
